<!DOCTYPE html>
<html>

	<head>
		<title></title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../lib/weui.min.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/find.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
		<style type="text/css">
			
.load2 {
	position: absolute;
	width: 200px;
	height: 160px;
	background: url('') no-repeat;
	margin-left: -96px;
	margin-top: 50px;
	left: 50%;
	top: 70%;
	-webkit-animation: small .8s infinite;
	-moz-animation: small .8s infinite;
	-o-animation: small .8s infinite;
	animation: small .8s infinite;
	background-position: center;
}

@keyframes small {
	0% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(.4);
		-moz-transform: scale(.4);
		-ms-transform: scale(.4);
		-o-transform: scale(.4);
		transform: scale(.4);
	}
	100% {
		-webkit-transform: scale(1);
		-moz-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
	}
}

.load {
	position: absolute;
	left: 50%;
	top: 50%;
	background-image: url(img/922445-20170312171729982-1524461368.png);
	height: 100px;
	width: 100px;
	margin-left: -50px;
	margin-top: 110px;
	-webkit-animation: test 4.5s steps(6) infinite, updown .8s infinite;
	-moz-animation: test 4.5s steps(6) infinite, updown .8s infinite;
	-o-animation: test 4.5s steps(6) infinite, updown .8s infinite;
	animation: test 4.5s steps(6) infinite, updown .8s infinite;
}

@keyframes test {
	0% {
		background-position: 0 0;
	}
	100% {
		background-position: 0 600px;
	}
}

@keyframes updown {
	0% {
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
	50% {
		-webkit-transform: translateY(-50px);
		-ms-transform: translateY(-50px);
		-o-transform: translateY(-50px);
		transform: translateY(-50px);
		
	}
	100% {
		-webkit-transform: translateY(0px);
		-moz-transform: translateY(0px);
		-ms-transform: translateY(0px);
		-o-transform: translateY(0px);
		transform: translateY(0px);
	}
}
.icon-haofan{
	font-weight: bold;
	font-size: 20px;
}
		</style>
	</head>

	<body ontouchstart>
		<div class="weui-tab">
			<div class="weui-tab__bd">
				<div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
					<div id="head">
					<span class="iconfont icon-back icon-haofan" v-on:click="haofanhui"></span>发现
					</div>
					<p class="cb"></p>
					<div id="content">
						<!--flex-->
						<div class="weui-flex">
							<div class="weui-flex__item wu_boder1">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" src="img/9c9aea0e856149083d84af3444b78jpeg.jpg">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title wu_h1">积分商城</h4>
										<p class="weui-media-box__desc">0元好物在这里</p>
									</div>
								</a>
							</div>
							<div class="weui-flex__item wu_boder3">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" src="img/3b9c4a4dfda1df548dc9274f6a7c1jpeg.jpg">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title wu_h2">精彩内容</h4>
										<p class="weui-media-box__desc">素食美味大推介</p>
									</div>
								</a>
							</div>
						</div>
						<div class="weui-flex">
							<div class="weui-flex__item">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" src="img/2bb180f2052c33cfec3852ef2bfccjpeg.jpg">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title wu_h3">推荐有奖</h4>
										<p class="weui-media-box__desc">5元现金拿不停</p>
									</div>
								</a>
							</div>
							<div class="weui-flex__item wu_boder2">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" src="img/8d42eef97ff4c1c2b671085358541jpeg.jpg">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title wu_h4">有红包快抢</h4>
										<p class="weui-media-box__desc">礼包福利领不停</p>
									</div>
								</a>
							</div>
						</div>
						<!--推荐头部-->
						<div class="food">
							<p>—美食热推—</p>
							<p>—你的口味，我都懂—</p>
						</div>
						<!--九宫格-->
						<div class="weui-grids">
							<a class="weui-grid js_grid" v-for="item in products1" onclick="wu_alinck(this)" id="{{item.id}}">
								<div class="weui-grid__icon">
									<img :src="item.attributes.img" alt="">
								</div>
								<p class="p1" v-html="item.attributes.name">
									<!--{{item.attributes.name}}-->
								</p>
								<p class="p2">
									￥{{price}}
								
								</p>
							</a>
						</div>
						<!--分割线-->
					</div>
				</div>
			</div>
				<div class="weui-tab__bd-item" v-if="type==true">
								<div class="load"></div>
								<div class="load2"></div>
							</div>
			<div class="weui-tabbar">
				<a href="../index/index.html" class="weui-tabbar__item weui-bar__item--on">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_button.png" alt="">
					</div>
					<p class="weui-tabbar__label">外卖</p>
				</a>
				<a href="find.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_msg.png" alt="">
					</div>
					<p class="weui-tabbar__label">发现</p>
				</a>
				<a href="../mymenu/mymenu.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_article.png" alt="">
					</div>
					<p class="weui-tabbar__label">订单</p>
				</a>
				<a href="../mine/mine.html" class="weui-tabbar__item">
					<div class="weui-tabbar__icon">
						<img src="../images/icon_nav_cell.png" alt="">
					</div>
					<p class="weui-tabbar__label">我的</p>
				</a>
			</div>
		</div>
		<script src="../lib/jquery-2.1.4.js"></script>
		<script src="../js/jquery-weui.min.js"></script>
		<script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.4/av-min.js"></script>
		<script type="text/javascript">
			var vue = new Vue({
				el: "body",
				data: {
					products1: "",
					price:parseInt(Math.random()*10+10),
					type:false,
				},
				created: function() {
					var APP_ID = '9etyUbhi95RBWTaoLBTyW5HP-gzGzoHsz';
					var APP_KEY = '6IkehXVEvUELlpo1SAf1c8PR';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});
					type=true;
					var mthis = this;
					var query = new AV.Query('Business');
					query.limit(9); // 最多返回 10 条结果
					query.skip(parseInt(Math.random() * 90)); // 跳过 20 条结果
					query.find().then(function(products) {
                     
				    mthis.products1 = products;
				    type=false;
					}).catch(function(error) {
						//alert(JSON.stringify(123));
					});
//					type=true;
					
				},
				methods:{
					haofanhui:function  () {
				       history.go(-1);
					}
				}
			});

			function wu_alinck(t) {
				location.href = "../Business-details/Business-details.html?index=" + t.getAttribute("id");
			}
		</script>
	</body>

</html>